<template>
  <div class="address">
    <top-header :isLeft="true" title="地址管理"></top-header>
    <div class="no-address" v-show="addressList.length == 0">
      <img src="../assets/imgs/service/address.png" alt="" />
      <div class="no-address-tips">
        <b>没有地址</b>
      </div>
      <p>你还没有收货地址 快去添加一个</p>
    </div>

    <div class="common-address">
      <ul>
        <li v-for="(item,index) in addressList" :key="index" >
        
           
            <div class="message" @click="chose(item)">
             
              <div>
          <p>{{item.name}}<span class="phone">{{item.phone}}</span></p>
          <p>
            <a-tag color="cyan"> {{ labelMap[item.label]}} </a-tag>
            {{item.address}}{{item.housenum}}
          </p></div></div>
          <p class="bianji" @click="edit(item)"><i class="iconfont">&#xe613;</i></p>
          <hr style="margin-left:-20px">
          <div class="foot">
          <div class="icon"><i class="iconfont" style="color:red;margin-right:10px" @click="xuanze1(item)" v-if="item.type == 1">&#xe653;</i> <i class="iconfont" @click="xuanze(item)" style="margin-right:10px" v-else>&#xe60c;</i>默认地址</div>
          <p class="del" @click="del(item)">删除</p>
         </div>
        </li>
      </ul>
    </div>
    <div class="btn">
      <a-button
        type="primary"
        block
        shape="round"
        @click="addAddress()"
      >
        <a-icon type="plus" />新建收货地址
      </a-button>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import TopHeader from "../components/TopHeader.vue";
import QS from 'qs';
export default {
  name: "Address",
  data() {
    return {
        tempAddress: {
        user_name: "",
        user_phone: "",
        address: "",
        housenum: "",
        label: "1",
        type:0
      },
        addressList:'',
      labelMap: {},
      // show1:''
      type:'',
      type1:''
    };
  },
  components: {
    TopHeader,
  },
  mounted() {
    const self = this;
    this.$http.get("/api/lableMap").then(
      (res) => {
        self.labelMap = res.data.data.data;
      },
      (err) => {}
    );
  },
  created() {
    this.show();
  },
  methods: {
    addAddress(){
 this.$store.dispatch("setTempAddress", this.tempAddress);
      this.$router.push({ name: "AddAddress" });
    },
    show() {
      this.$ajax.get("/mysql/addressselect.php",{
        params:{
          id:localStorage.id
        }
      }).then((res) => {
        console.log(res.data);
        this.addressList = res.data;
      });
    },
    del(item){    
        Dialog.confirm({
  title: '提示',
  message: '你真的确定要删除吗',
})
  .then(() => {
   this.$ajax.get("/mysql/addressdel.php",{
            params:{
                name: item.name
            }
        }).then((res)=>{
            console.log(res)
            this.$router.go(0)
        }) 
  })
  .catch(() => {
     return false;
  });
        
       
    },
    edit(item){
       this.$router.push({
           name:'AddressEdit',
           query:{
               name:item.name,
               id:item.id
           }
       })
    },
    xuanze(item){
      console.log(item.id)
      // this.type1 = 1
      this.$ajax.get('/mysql/addressselect.php',{
        params:{
          id:localStorage.id
        }
      }).then((res)=>{
        var arr4 = res.data
        arr4.forEach(j => {
          j.type = 0
          console.log(j.type)
          
          this.$ajax.get('/mysql/addresstype2.php',{
            params:{
              type:j.type
            }
          }).then((res)=>{
            console.log(res)
            
          })
        });
          this.$ajax.get('/mysql/addresswhere.php',{
        params:{
          id:item.id
        }
      }).then((res)=>{
      console.log(res)
      var arr = res.data
      arr.some((i)=>{
        i.type = 1
        console.log(i.type)
        let params = {
          id:item.id,
          type:i.type
        };
        this.$ajax.post('/mysql/addresstype.php',QS.stringify(params)).then((res)=>{
          console.log(res)
          this.$router.go(0)
        })
      })
      })
      })
    
    },
    xuanze1(item){
      console.log(item.id)
      // this.type1 = 0
      this.$ajax.get('/mysql/addresswhere.php',{
        params:{
          id:item.id
        }
      }).then((res)=>{
      console.log(res)
      var arr = res.data
      arr.some((i)=>{
        i.type = 0
        console.log(i.type)
        let params = {
          id:item.id,
          type:i.type
        };
        this.$ajax.post('/mysql/addresstype.php',QS.stringify(params)).then((res)=>{
          console.log(res)
          this.$router.go(0)
        })
      })
      })
    },
    chose(item){
      
      // this.$router.push({
      //   name:'Buy',
      //   query:{
      //     id:item.id
      //   },
      //   replace:true
      // })
      this.$store.dispatch('getID',item.id)
      this.$router.go(-1)
    }
  },
};
</script>
<style lang="scss" scoped>

.address {
    // background: gray;
  width: 100%;
  height: 100%;
  .no-address {
    margin-top: 70px;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .no-address-tips {
      display: flex;
      justify-content: center;
      font-size: 1.5rem;
      margin: $common-margin;
    }
  }
  .common-address {
    //   background: gray;
      margin-top: 70px;
    // margin-top: $common-margin;
    // padding: $common-padding;
    height: 70%;
    background-color: $module-color;
    ul {
        padding-left:0 ;
      li {
        
        padding-left: 20px;
        margin-top: 30px;
        list-style-type: none;
        // border-bottom: 1px solid #ccc;
        padding-top: $common-padding; 
        // background-color: rgb(228, 216, 216);
        .message{
            margin-right: 50px;
           display: flex;
           justify-content:flex-start;
           .icon{
             padding-top: 20px;
           }
        }
      }
      
      .phone{
          margin-left:10px ;
      }
      .bianji{
          float: right;
          margin-top: -50px;
          margin-right: 20px;
      }
      // .del{
      //     float: right;
      //     margin-right: 20px;
      //     font-size: 16px;
      // }
    .foot{
      display: flex;
      justify-content: space-between;
    }
    }
  }
  .btn {
      position: fixed;
      bottom: 20px;
      left: 20px;
      width: 90%;
    //   margin: 0 auto;
    // padding: $common-padding;
  }
}
</style>
